<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        .navbar-list li:hover{
            color: #555;
            background-color: #e7e7e7;
        }
        .navbar-right li:active{
            color: #555;
            background-color: #e7e7e7;
        }
    </style>
</head>
<body>
<!---->
<ul class="nav navbar-list bg-light">
    <div class="nav-item">
        <h2 style="color: #005cbf">爱思教育</h2>
    </div>
    <div class="col-1">
        <!--        占位-->
    </div>
    <li class="nav-item">
        <a class="nav-link" href="index.html">返回主页</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="newsList.html">新闻列表</a>
    </li>
</ul>
<div id="news">

</div>

</body>
<script src="jQuery/jquery-3.6.0.min.js"></script>
<script>
    jQuery(function () {
        jQuery.get("news/list",function (data) {
            let cars='';
            for (let i=0;i<data.length;i++) {
                let tmp=data[i];
                cars+= `
<div class="card mb-3" style="max-width: 540px;">
    <div class="row no-gutters">
        <div class="col-md-4">
            <img src="img/news/${tmp.newsSrc}" style="width: 100%; height: 100%; object-fit: cover;" class="card-img" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">${tmp.newsTitle}</h5>
                <p class="card-text">${tmp.newsShortcut}</p>
                <div class="row">
                    <p class="card-text col-5">
                        <small class="text-muted row">${tmp.newsDate}</small>
                    </p>
                    <span class="btn btn-primary col-5" data=${i+1}>了解详情</input>
                </div>
            </div>
        </div>
    </div>
</div>`;
            }
            jQuery("#news").html(cars);
            $("span").click(function () {
                location.href="newsInfo.html?"+"link="+$(this).attr("data");
            })
        });
    })
</script>
</html>

<!--http://localhost:8088/edusys/newsList.html#-->